<template>
	<div class="main flex-v">					
		<div class="balanceOuterWrap">
			<div class="balanceTop">
				<go-back aa='../volunteer/programme'></go-back>
				<span :class="['banTitle',typer==1?'col1':typer==2?'col2':'col3']">{{typer==1?'平衡策略':typer==2?'院校优先策略':'专业优先策略'}}</span>
				<img class="topBg" :src="typer==1?imgBg1:typer==2?imgBg2:imgBg3" alt="">
			</div>
			<universities v-on:btnClick='goesss' v-on:btnMajorClick='gotMajorInfo'></universities>

		</div>
	</div>
</template>

<script>
	import axios from '~/plugins/axios';
	import axios1 from '~/plugins/axios1';
	import goBack from '~/components/goBack'
	import universities from '~/components/Universities'
	import ls from 'store2'
	import {
		setTimeout
	} from 'timers';


	export default {
		head: {},
		components: {
			goBack,
			universities
		},
		data() {
			return {
				sreStyle:'height:3rem',
				imgBg1: require('~/static/images/vol4.png'),
				imgBg2: require('~/static/images/vol5.png'),
				imgBg3: require('~/static/images/vol6.png'),
				typer: 0,
				userType: ls.get('userData').userType
			}
		},
		created() {
			this.commonJs.gologins();
			this.typer = this.$route.query.type;
		},
		methods: {

			openVip(){
				alert('去付钱')
			},
			gotMajorInfo(data, code, line) {
				console.log('freedata', data)
				console.log('freecode', code)
				console.log('freeline', line)

			},
			goesss(data) {
				console.log(data)

			},

			goto(routerName, queryData) {

				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});

			},
			fun() {
				this.$router.replace({
					path: '../volunteer/programme'

				})

			}
		},

		mounted: function() {
			this.$vux.loading.hide()
			if (this.commonJs.isTerminal() == 'isAndroid') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
				}
			}
		},
		destroyed() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		computed: {

		},
		watch: {}
	}
</script>

<style scoped lang="less">
	/deep/h4 {
		font-size: 0.4rem !important;
	}

	/deep/.vux-popup-dialog {
		background: none;
	}
	
	.maskWrap {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
		filter: alpha(opacity=98);
		-moz-opacity: 0.98;
		-khtml-opacity: 0.98;
		opacity: 0.98;	
		.hides {
			width: 98%;
			height: 2.75rem;
			background: url('~/static/images/volunteer_pic_vip_bg.png') no-repeat;
			background-size: 100% 100%;
			opacity: 1;
			position: relative;
			z-index: 20;
			margin: 0 auto;
	
			.sp1 {
				width: 1.2rem;
				height: 1.2rem;
				display: block;
				margin: 0 auto;
	
				.imgIcon {
					width: 1.2rem;
					height: 1.2rem;
				}
			}
	
			.sp2 {
				font-size: 0.26rem;
				font-family: 'PingFang-SC-Bold';
				font-weight: bold;
				color: rgba(108, 191, 32, 1);
				line-height: 0.37rem;
				display: block;
				text-align: center;
				width: 100%;
			}
	
			.sp3 {
				display: block;
				width: 1.4rem;
				height: 0.6rem;
				background: rgba(108, 191, 32, 1);
				border-radius: 0.35rem;
				font-size: 0.24rem;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				line-height: 0.6rem;
				text-align: center;
				margin: 0.2rem auto 0;
			}
	
		}
	
	}




	.balanceOuterWrap {
		width: 100%;
		min-height: 100vh;

		.balanceTop {
			z-index: 2;
			width: 100%;
			height: 2.6rem;
			// background: #fff;
			position: relative;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
			border-bottom-left-radius: 0.2rem;
			border-bottom-right-radius: 0.2rem;
			// background: url('~/static/images/volunteer_pic_profession_bg.png') no-repeat;
			background-size: cover;

			.topBg {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 3.67rem;
				height: 2.06rem;
			}

			.banTitle {
				display: block;
				height: 0.62rem;
				font-size: 0.44rem;
				font-weight: bold;

				line-height: 0.62rem;
				margin-left: 0.5rem;
				margin-top: 0.3rem;
			}

			.col1 {
				color: rgba(148, 210, 103, 1);
			}

			.col2 {
				color: #fec03e;
			}

			.col3 {
				color: #5ab2f1;
			}
		}

		.balanceWrap {
			width: 7.5rem;
			min-height: 100vh;
			background: #fff;

			.balanceBox {
				width: 100%;
				height: auto;
				padding: 0.3rem 0rem;
				box-sizing: border-box;

				.blBar1 {
					width: 100%;
					height: 0.8rem;
					background: rgba(250, 250, 250, 1);
					border-radius: 0.1rem;
					padding: 0 0.2rem;
					box-sizing: border-box;

					.sp1 {
						height: 0.8rem;

						i,
						b,
						em {
							display: inline-block;
							vertical-align: middle;
						}

						i {
							width: 0.18rem;
							height: 0.25rem;
							background: rgba(241, 116, 103, 1);
							border-radius: 0.09rem;
						}

						b {
							font-size: 0.34rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.8rem;
							margin-left: 0.25rem;
						}

						em {
							line-height: 0.8rem;
							margin-left: 0.2rem;
							font-size: 0.3rem;
							font-weight: bold;
							color: rgba(187, 187, 187, 1);
						}
					}

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
					}
				}
			}
		}
	}
</style>
